import React, { PureComponent } from 'react';
import { Card, Table, Modal, Pagination ,Tabs, Button} from 'antd'
import { PageContainer } from '@ant-design/pro-layout';
import { getDoneExam,getDoneExam2 } from '@/services/studentExam'
import { checkHost } from '@/utils/utils'
import { history } from 'umi'
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        const userinfo = JSON.parse(localStorage.getItem('userinfo') || '{}');
        const hasTwo:any = localStorage.getItem('hasTwo')||2;
        const openid = userinfo.openid;
        if (checkHost()) {
            if (!openid&&hasTwo!=1) {
                Modal.confirm({
                    title: <p style={{ fontSize: 20, marginTop: -3 }}>操作提醒</p>,
                    content: <p style={{ fontSize: 18 }}>新用户请绑定您的微信账号解锁培训练习权限，绑定成功后每次登录平台请使用微信进行扫码登录即可。</p>,
                    okText: '去绑定',
                    style: { fontSize: 30, color: "#f60" },
                    onOk: () => {
                        location.href = `/index/index/login_weixin`;
                    },
                });
                history.goBack();
            }
        }

        this.state = {
            data: [],
            loading: true,
            currentPage:1,
            count:0,
            tab:'2'
        }
    }
    goToCheck = (id: any, names: any,wrong:number,subject:any,subjects:string) => () => {
        this.props.history.push(
            `/checkPaper2/${id}/${names}?wrong=${wrong}&subject=${subject}&subjects=${subjects}`
        );
    }
    renderList=(page:any)=>{
        const id_number = localStorage.getItem('id_number') || '';
        getDoneExam({ page, id_number }).then(res => {
            this.setState({
                data: res.data,
                loading: false,
                count:res.count
            })
        })
    }
    renderList2=(page:any)=>{
        const id_number = localStorage.getItem('id_number') || '';
        const {subject} = this.props.location.query;
        getDoneExam2({ page, id_number ,subject}).then(res => {
            this.setState({
                data: res.data,
                loading: false,
                count:res.count
            })
        })
    }
    componentDidMount() {
        this.renderList2('1')
    }
    changePage = (e: any) => {
        this.setState({
            loading:true,
            currentPage:e
        })
        const {tab}= this.state;
        if(tab==='1'){
            this.renderList(e);
        }else{
            this.renderList2(e);
        }
    }
    changeTab=(e:any)=>{
        this.setState({
            loading:true,
            currentPage:1,
            tab:e
        })
        if(e==='1'){
            this.renderList(1);
        }else{
            this.renderList2(1);
        }
    }
    render() {
        const {subject,subjects} = this.props.location.query;
        const { data, loading ,currentPage,count} = this.state;
        const columns = [
            {
                title: '考试名称',
                dataIndex: 'names',
                render:(names:string,row:any,index:number)=>{
                    const name=  `${subjects}-模拟考试`+(  count - index - (currentPage - 1) * 10 )
                    return names||name
                }   
            },
       
   
            {
                title: '得分',
                dataIndex: 'grade',
                render: (grade: string) => {
                    return grade?grade+'分':'0分'
                }
            },
            {
                title: '答题时长',
                dataIndex: 'duration',
                render:(duration:number)=>{
                    return (duration/60/1000).toFixed(2)+'分钟'
                }
            },
            {
                title: '考试时间',
                dataIndex: 'time',
            },
            {
                title: '查卷',
                dataIndex: 'ids',
                render: (ids: string, row: any,index:number) => {
                    const num = (  count - index - (currentPage - 1) * 10)
                    const name = row.names||(subjects+'-模拟考试'+num)
                    return <React.Fragment>
                        <a style={{padding:5,background:"#1890ff",color:"#FFF",borderRadius:5}} onClick={this.goToCheck(ids, name,0,subject,subjects)}>复卷</a>
                        <a style={{marginLeft:20,padding:5,background:"#fda63f",color:"#FFF",borderRadius:5}} onClick={this.goToCheck(ids, name,1,subject,subjects)}>查看错题</a>
                    </React.Fragment>
                }
            }
        ]
        return (
            <PageContainer title="模拟考试">
                <Card>
                    <Tabs onChange={this.changeTab} >
                        {/* <Tabs.TabPane key="1" tabKey="1" tab="考试列表"></Tabs.TabPane> */}
                        <Tabs.TabPane  key="2" tabKey="2" tab="我的试卷"></Tabs.TabPane>
                    </Tabs>
                    <Button onClick={()=>this.props.history.push('/select')} style={{position:'absolute',top:37,left:110}} type="primary" danger>返回主页</Button>
                    <Table pagination={false} loading={loading} columns={columns} dataSource={data} rowKey="ids" />
                    <Pagination style={{ float: 'right', marginTop: 20 }} onChange={this.changePage} current={currentPage*1} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                    </Card>
            </PageContainer>
        );
    }
}

export default Index;
